<template>
  <!-- 管理系统 ：
        增删改查先后
        查
        增
        删与改

      查
       1：布局
       2：定义接口api
       3:导入api
       4:进入页面调用api
       5:存储数据并渲染

      增：
       1：创建新增弹框组件
       2：在父组件导入注册使用
       3：点击新增打开弹框
       4：新增弹框组件的布局完成
       5：新增弹框组件数据处理完成
       6：新增弹框组件的表单验证
       7：定义新增api
       8:导入新增api
       9:在新增按钮点击后调用新增api
       10:调用完成
           a:关闭弹框
           b:重置表单数据
           c:提示
           d:刷新父级列表数据

      删
       1:定义删除api
       2:导入删除api
       3:点击删除弹出确定框
       4：点击确定框的确定调用删除api
       5:调用成功
         a:提示
         b:刷新列表

      改：
       1：点击编辑打开弹框
       2：弹框数据回显（要深拷贝）
       3：在弹框组件内定义了一个mode,新增与编辑时都要修改mode
       4:调整标题等数据
       5：调整表单验证
       6：定义编辑api
       7:导入编辑api
       8:点击确定要分场景调用api
       9:调用成功
          关闭弹框
          提示
          清空表单验证与数据（resetFields不靠谱，需要手动清空）
          刷新父级列表
 -->

  <div v-loading="loading" class="departments">
    <el-card>
      <div class="main">
        <!-- el-dropdown
           默认插槽：默认展示内容
           具名插槽(dropdown)：菜单
              el-dropdown-menu
                 el-dropdown-item
        -->

        <div class="top">
          <div class="left">传智教育</div>
          <div class="manager">负责人</div>
          <el-dropdown>
            <div class="option">操作</div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  @click.native="addEvent('')"
                >添加子部门</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <el-tree class="tree" :data="list" :props="{ label: 'name' }">
          <template v-slot="{ data }">
            <div class="top">
              <div class="left">{{ data.name }}</div>
              <div class="manager">{{ data.manager }}</div>
              <el-dropdown>
                <div class="option">操作</div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      @click.native="addEvent(data.id)"
                    >添加子部门</el-dropdown-item>
                    <el-dropdown-item
                      @click.native="editEvent(data)"
                    >编辑部门</el-dropdown-item>
                    <el-dropdown-item
                      @click.native="delEvent(data.id)"
                    >删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>

    <!-- 新增组件 -->
    <Add ref="add" :init-list="initList" @getData="getData" />
  </div>
</template>
<script>
import { companyDepartment, companyDepartmentDelete } from '@/api/departments'
import Add from './components/Add.vue'
export default {
  components: {
    Add
  },
  data() {
    return {
      loading: false,
      list: [],
      initList: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      this.loading = true
      const res = await companyDepartment()
      this.loading = false
      this.initList = res.data.depts
      this.list = this.changeData(res.data.depts, '')
      // console.log(this.changeData(res.data.depts, ''))
    },
    // 树形数据转换
    changeData(arr, pid) {
      // 1:找出第一层数据
      // 2:将pid写成形参
      // 3:给找出来的每一层数据加入children
      // 4:使用递归找出它们的子集（子集的pid是自己的id）
      return arr.filter((item) => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // 新增点击事件
    addEvent(pid) {
      this.$refs.add.isShow = true
      // 修改add组件的form.pid
      this.$refs.add.form.pid = pid
      // 修改add组件内的mode
      this.$refs.add.mode = 'add'
    },
    // 删除点击事件
    delEvent(id) {
      this.$confirm('您确定删除该项吗?', '提示')
        .then(async() => {
          await companyDepartmentDelete(id)
          // 提示
          this.$message.success('删除成功')
          // 刷新列表
          this.getData()
        })
        .catch(() => {})
    },
    // 编辑点击事件
    editEvent(data) {
      // 打开弹框
      this.$refs.add.isShow = true
      // 数据回显
      this.$refs.add.form = JSON.parse(JSON.stringify(data))
      // 深拷贝  JSON.parse(JSON.stringify(对象))  ....
      // 修改add组件内的mode
      this.$refs.add.mode = 'edit'
      console.log('data', data)
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  padding: 20px;
  .main {
    width: 80%;
    margin: 20px auto;
    .top {
      display: flex;
      align-items: center;
      width: 100%;
      .left {
        flex: 1;
      }
      .manager {
        width: 120px;
      }
    }
    .tree {
      margin-top: 15px;
    }
  }
}
</style>
